<template>
  <div id="container1">
    <bm-control>
      <button @click="toggle('polygonPath')">{{ polygonPath.editing ? '停止绘制' : '开始绘制' }}</button>
    </bm-control>
    <div class="container-cont">
      <div id="myMap">
        <baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:100%"
          @mousemove="syncPolygon"
          @click="paintPolygon"
          @rightclick="newPolygon"
          :map-click="false"  :scroll-wheel-zoom='true'>
          <bm-polygon
            :path="path"
            v-for="path of polygonPath.paths"
            :key="path.toString()"
            stroke-color="blue"
            fill-color="red"
            :fill-opacity="0.8"
            :stroke-opacity="0.5"
            :stroke-weight="2"
            @click="alertpath"
          />

         </baidu-map>
      </div>

      <!--台站列表-->
      <div id ="myInfo">
        <!--<el-row :gutter="20" style="padding: 20px 0; margin: 20px 0; border: 1px solid #ccc; border-radius: 4px">-->
          <!--&lt;!&ndash;<el-col :span="3">&ndash;&gt;-->
            <!--&lt;!&ndash;<el-input placeholder="查询" v-model="address"></el-input>&ndash;&gt;-->
          <!--&lt;!&ndash;</el-col>&ndash;&gt;-->
          <!--<el-col :span="21">-->
            <!--<el-button-->
              <!--type="primary"-->
              <!--@click="toggle('polygonPath')"-->
            <!--&gt;{{ polygonPath.editing ? '重新绘制' : '开始绘制' }}</el-button>-->
            <!--<el-button type="primary" @click="save">保存</el-button>-->
          <!--</el-col>-->
        <!--</el-row>-->
        <!--<div id = "filter">-->
            <!--筛选条件：-->
            <!--<input type="button" name="selectAll" value="全选" @click="selectAllItem()" />  -->
            <!--<input type="button" name="deleteAll" value="全不选" @click="deleteAllItem()" />  -->
            <!--<input type="button" name="selectOther" value="反选" @click="selectOtherItem()" />-->
            <!--<input type="button" value="确认重选" onclick="selectedItem()" />-->
            <!--<input type="checkbox" name="hobby" value="2" checked = "checked"/>形变  -->
            <!--<input type="checkbox" name="hobby" value="3" checked/>地电地磁  -->
            <!--<input type="checkbox" name="hobby" value="4" checked/>地下流体  -->
            <!--<input type="checkbox" name="hobby" value="9" checked/>辅助流体  -->
        <!--</div>-->
        <!--<div id = "form1" >-->
            <!--<div id = "form">-->
            <!--<table id = "stationtable">-->
                <!--<thead>-->
                <!--&lt;!&ndash; 创建表格头 &ndash;&gt;-->
                <!--<tr id="list">-->
                    <!--<th><input type="checkbox" id="checkall" onclick="checkAll(this)" />全选</th>-->
                    <!--<th>所属区域</th>-->
                    <!--<th>所属台站</th>-->
                    <!--<th>测点编码</th>-->
                    <!--<th>仪器名称</th>-->
                    <!--<th>测项名称</th>-->
                <!--</tr>-->
                <!--&lt;!&ndash; 添加全部删除按钮， &ndash;&gt;-->
                <!--&lt;!&ndash;<tr>&ndash;&gt;-->
                    <!--&lt;!&ndash;<td ></td>&ndash;&gt;-->
                    <!--&lt;!&ndash;&lt;!&ndash;<td ><input type="button" id="repaint" value="重新画图" onclick="delAll()"></td>&ndash;&gt;&ndash;&gt;-->
                <!--&lt;!&ndash;</tr>&ndash;&gt;-->
                <!--</thead>-->
                <!--<tbody id="listbody"></tbody>-->
            <!--</table>-->
            <!--</div>-->

        <!--</div>-->
    </div>
    </div>

     <!--数据参数选择框:开始时间，时间轴个数，采样方式，采样率，-->
    <div id="mySel">
      <br/>
      <el-form>
        <el-row :gutter="5">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <!--<span class="demonstration">开始时间</span>-->
              <el-date-picker
                v-model="value2"
                type="datetime"
                placeholder="选择开始日期时间"
                align="right"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-input
                placeholder="请输入时间轴个数"
                v-model="timepoint"
                clearable>
              </el-input>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="grid-content bg-purple">
               <el-select v-model="form.sampleRate" placeholder="请选择采样间隔">
                <el-option
                  v-for="item in sampleRate_list"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-select v-model="form.sample" placeholder="请选择采样方式">
                <el-option
                  v-for="item in sample_list"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>

        <div>
          <el-button style="margin-top: 5px;" @click="change" >完成</el-button>
        </div>
      </el-form>
    </div>

  </div>
</template>

<script>
  import BmPolygon from "vue-baidu-map/components/overlays/Polygon";
  import BmMarker from "vue-baidu-map/components/overlays/Marker";
  import BmLocalSearch from "vue-baidu-map/components/search/LocalSearch";
  // import BmLocalSearch from "vue-baidu-map";
  export default {
    name: "getEarthData",
    data () {
      return {
        center: {lng: 113.323685, lat: 23.130522},//中心点
        zoom: 5 ,            //地图级别
        StationArr:{
          longtitude:null,
          latitude:null,
          stationID:null,
          stationName:null,
        },    //台站信息
        points:[],           //获取所有台站
        overlays:[],         //获取框选的台站
        address: "", // 查询地址关键字
        polygonPath: {
          editing: false,
          paths: []     // 绘制完成后的经纬度，其实是在画的时候动态push的，因为在点击的时候触发了 paintPolygon 函数
        },
        sw:{
          lng:109.45744048529967,
          lat:36.49771311230842,
        },
        form:{
          sample:null,
          sampleRate:null,
        },
        sample_list: [{
          value: '1',
          label: '平均数'
          }, {
            value: '2',
            label: '最大值'
          }, {
            value: '3',
            label: '最小值'
          },{
            value: '4',
            label: '中位数'
          },{
            value: '5',
            label: '最后一个值'
        }],

        sampleRate_list: [{
          value: '0',
          label: '1次每秒'
          }, {
            value: '1',
            label: '1次每分钟'
          }, {
            value: '2',
            label: '1次每小时'
          },{
            value: '3',
            label: '1次每天'
          },{
            value: '4',
            label: '1次每周'
          },{
            value: '5',
            label: '1次每月'
        },{
            value: '6',
            label: '1次每季度'
        },{
            value: '7',
            label: '1次每年'
        }],

        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },

        //

        value1: '' ,
        value2: '' ,
        timepoint:'',
      }
    },

    methods: {
      handler ({BMap, map}) {
        var point = new BMap.Point(this.center.lng, this.center.lat)
        map.centerAndZoom(point, this.zoom)
        map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
        // var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 6, strokeOpacity: 1, Color: 'Red', fillColor: '#f03' })
        //获取台站数据
        this.obtainData({BMap, map})
      },

      getClickInfo (e) {
        console.log(e.point.lng)
        console.log(e.point.lat)
        this.center.lng = e.point.lng
        this.center.lat = e.point.lat
      },

      obtainData({BMap, map}){
        //测试数据
       if (document.createElement('canvas').getContext) {
          for (var i = 0; i < 3000; i++) {
            this.StationArr.longtitude = this.sw.lng + 2 * (Math.random() * 0.7);
            this.StationArr.latitude = this.sw.lat - 2 * (Math.random() * 0.7);
            this.StationArr.stationID = 10000 + i;
            this.StationArr.stationName = "台站" + i;
            var point = new BMap.Point(this.StationArr.longtitude, this.StationArr.latitude);
            this.points.push(point)
          }
          console.log(this.points.length)
          var options = {
            size: BMAP_POINT_SIZE_BIG,
            shape: BMAP_POINT_SHAPE_WATERDROP,
            color: '#d340c3'
          }
          var pointCollection = new BMap.PointCollection(this.points, options);  // 初始化PointCollection
          pointCollection.addEventListener('click', function (e) {
            alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat);  // 监听点击事件
          });
          map.addOverlay(pointCollection);  // 添加Overlay
        }else{
          alert('请在chrome、safari、IE8+以上浏览器查看本示例');
        }

      },

      change(){},

       // 开启多边形绘制
      toggle(name) {
        this[name].editing = !this[name].editing;
        // 在这里做一步判断，如果有路径且开启绘制就把原来的路径清空
        if (this.polygonPath.paths) {
          this.polygonPath.paths = [];
        }
      },

      // 鼠标移动时
      syncPolygon (e) {
        if (!this.polygonPath.editing) {
          return
        }
        const { paths } = this.polygonPath
        if (!paths.length) {
          return
        }
        const path = paths[paths.length - 1]
         if (!path.length) {
          return
        }
        if (path.length === 1) {
          path.push(e.point)
        }
        this.$set(path, path.length - 1, e.point)
     },

      // 鼠标左键点击时往路径里push一个点
      newPolygon (e) {
        if (!this.polygonPath.editing) {
             return
        }
        // 当开始绘制后把按钮调回开始绘制状态，防止绘制多个图形
        this['polygonPath'].editing = !this['polygonPath'].editing
        const { paths } = this.polygonPath
        if (!paths.length) {
          paths.push([])
        }
        const path = paths[paths.length - 1]
        path.pop()
        if (path.length) {
          paths.push([])
        }
      },

      // 修改拖拽坐标
      updatePolygonPath(e) {
        // this.polygonPath.paths[0] = e.target.getPath();
      },

      // 鼠标右键多边形绘制完成
      paintPolygon (e) {
      if (!this.polygonPath.editing) {
           return
         }
          const { paths } = this.polygonPath
           !paths.length && paths.push([])
          paths[paths.length - 1].push(e.point)
      },

      alertpath (e) {
         console.log(e.currentTarget.so)
         console.log(this.polygonPath.paths[0])
      },

      //判断一个标注点是否在多边形里
      //pt标注点，poly多边形数组
      isInsidePolygon(pt, poly) {
         for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
             ((poly[i].lat <= pt.lat && pt.lat < poly[j].lat) || (poly[j].lat <= pt.lat && pt.lat < poly[i].lat)) &&
             (pt.lng < (poly[j].lng - poly[i].lng) * (pt.lat - poly[i].lat) / (poly[j].lat - poly[i].lat) + poly[i].lng) &&
             (c = !c);
         return c;
      }

    }

  }
</script>

<style scoped>
  #container1{
    height: calc(100vh - 50px);
  }
  .container-cont{
    height: 80%;
    width:100%;
    display: flex;
  }
  #myMap{
    flex: 6;
  }
  #myInfo{
    flex:4;
    background: #36A5BC
  }
  #mySel{
    height: 20%;
    width:100%;
    background: #FFFFFF
  }
  .el-row {
    margin-bottom: 20px;
    .el-row:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

</style>
